<template>
	<div class="">
		<el-date-picker v-if="props.disabledDate" v-model="state.dateTime" type="daterange" unlink-panels format="YYYY/MM/DD" 
            value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate" :shortcuts="props.shortcuts ? shortcuts : []"
        start-placeholder="开始日期" end-placeholder="结束日期" />
        <el-date-picker v-else type="daterange" v-model="state.dateTime" unlink-panels format="YYYY/MM/DD" value-format="YYYY-MM-DD" 
            range-separator="-" :shortcuts="props.shortcuts ? shortcuts : []"
        start-placeholder="开始日期" end-placeholder="结束日期" />
	</div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
// 定义父组件传过来的值
const props = defineProps({
	// 背景颜色
	disabledDate: {
		type: Boolean,
		default: () => false,
	},
    // 字体颜色
    shortcuts: {
		type: Boolean,
		default: () => true,
	},
});
const state = reactive({
    dateTime: [],
})
// 定义变量内容
const disabledDate= (time: Date) => time.getTime() > Date .now();
const shortcuts = [
	{
		text: '今日',
		value: () => {
			const end = new Date()
			const start = new Date()
			return [start, end]
		},
	},
	{
		text: '昨日',
		value: () => {
			const now = new Date();
			const end = new Date(now);
			end.setDate(end.getDate() - 1);
			// 获取昨天的日期
			const start = new Date(now);
			// 将昨天的日期减去一天的毫秒数
			start.setDate(start.getDate() - 1);
			return [start, end]
		},
	},
	{
		text: '本周',
		value: () => {
			const now = new Date();
			const dayOfWeek = now.getDay();
			const numDay = dayOfWeek === 0 ? 7 : dayOfWeek; // 如果今天是周日，则dayOfWeek返回0，我们要将其视为7
			const start = new Date(now);
			const end = new Date();
			start.setDate(start.getDate() - numDay + 1);
			return [start, end]
		},
	},
	{
		text: '本月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.setDate(1))
			return [start, end]
		},
	},
	{
		text: '本季度',
		value: () => {
			const now = new Date();
			const end = new Date()
			const start = new Date(now.getFullYear(), 0, 1);
			const quarter = Math.floor(now.getMonth() / 3) + 1;
			start.setMonth(start.getMonth() + (quarter - 1) * 3);
			start.setHours(0, 0, 0, 0);
			return [start, end]
		},
	},
	{
		text: '本年度',
		value: () => {
			const now = new Date();
			const end = new Date()
			// 设置月份为1（一月）
			now.setMonth(0);
			// 设置日期为1
			now.setDate(1);
			// 设置时间为午夜12点
			now.setHours(0, 0, 0, 0)
			const start = now;
			return [start, end]
		},
	},
	{
		text: '上年度',
		value: () => {
			const now = new Date();
			const year = now.getFullYear() - 1;
			const start = new Date(year, 0, 1);
			const end = new Date(year, 11, 31);
			return [start, end]
		},
	},

	// {
	// 	text: '本月',
	// 	value: () => {
	// 	const end = new Date()
	// 	const start = new Date()
	// 	start.setTime(start.setDate(1))
	// 	return [start, end]
	// 	},
	// },
	// {
	// 	text: '近一个月',
	// 	value: () => {
	// 	const end = new Date()
	// 	const start = new Date()
	// 	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
	// 	return [start, end]
	// 	},
	// },
	// {
	// 	text: '近三个月',
	// 	value: () => {
	// 	const end = new Date()
	// 	const start = new Date()
	// 	start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
	// 	return [start, end]
	// 	},
	// },
	// {
	// 	text: '近半年',
	// 	value: () => {
	// 	const end = new Date()
	// 	const start = new Date()
	// 	start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
	// 	return [start, end]
	// 	},
	// },
	// {
	// 	text: '近一年',
	// 	value: () => {
	// 	const end = new Date()
	// 	const start = new Date()
	// 	start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
	// 	return [start, end]
	// 	},
	// },
]

</script>
<style scoped lang="scss">
// 隐藏expand 箭头
:deep(.el-date-editor.el-input__wrapper){
	width: auto;
}
</style>
